<template>
  <div class="change-box">
    <v-step :list="barList" :titleType=3></v-step>

    <div class="line-box"></div>
    <div class="wrap-box">
      <div class="title1">姓名:</div>
      <div class="title2" v-model="certName">{{certName}}</div>
    </div>
    <div class="wrap-box">
      <div class="title1">身份证号:</div>
      <div class="title2" v-model="certNo">{{certNo}}</div>
    </div>
    <div class="wrap-box">
      <div class="title1">银行卡号:</div>
      <div class="title2" v-model="cardNo">{{cardNo}}</div>
    </div>
    <div class="wrap-box">
      <div class="title1">银行名称:</div>
      <div class="title2" v-model="bankName">{{bankName}}</div>
    </div>
    <div class="wrap-box">
      <div class="title1">银行卡归属地:</div>
      <div class="title2" v-model="bankArea">{{bankArea}}</div>
    </div>
    <div class="btn-box">
      <button type="button" class="btn" @click="change">换绑</button>
    </div>

    <div class="tx_bck" v-if="showKey">
      <div class="popup_box">
        <div class="popup_top" @click="closeModal"><img src="./close.png" class="close" onclick="return false"></div>
        <div class="pop_ubox">
          <div class="pop_f">请输入提现密码</div>
        </div>
        <div class="pop_mpb">
          <div class="p_mlist" v-for="i in items" :class="password[i]?'mmdd':''"></div>
        </div>
        <div class="pop_moy" @click="forgetPwd">忘记密码？</div>
      </div>
      <div class="numb_box">
        <div class="xiaq_tb">
          <img src="./pull.jpg" class="pull" onclick="return false">
        </div>
        <ul class="nub_ggg">
          <li @click="keyUpHandle($event)" v-for="val in keys" v-if="val!='清空'">
            <a href="javascript:void(0);">{{ val }}</a>
          </li>
          <li v-else @click="clearPwdHandle">
            <a href="javascript:void(0);">清空</a>
          </li>
          <li @click="delHandle">
            <a href="javascript:void(0);">删除</a>
          </li>
        </ul>
      </div>
    </div>

    <v-dialog v-model="sendVal" :content="content" cancelText="取消" confirmText="重试" @confirm="confirm"
              @cancel="cancel"></v-dialog>
    <v-dialog v-model="modalVal" :content="modal" type="default" @sure="sure"></v-dialog>
  </div>
</template>

<script>
  import flowStep from "../../components/flow/flow"
  import Cookies from 'js-cookie'
  import md5 from 'js-md5'
  import dialog from '../../components/dialog/dialog'
  import {baseUrl, salt} from "../../common/js/env"

  const keys = () => [1, 2, 3, 4, 5, 6, 7, 8, 9, "清空", 0]

  export default {
    data() {
      return {
        certName: "",
        certNo: "",
        cardNo: "",
        bankArea: "",
        bankName: "",
        modal: "",
        content: "",
        sendVal: false,
        modalVal: false,
        showKey: false,
        password: [],
        keys: keys(),
        items: [0, 1, 2, 3, 4, 5],
        barList: ['工资卡信息', '银行卡扫描', '银行卡信息']
      }
    },
    mounted() {
      this.certName = sessionStorage.getItem("bank_user_name");
      this.certNo = this.$decruption(sessionStorage.getItem("identity_no"));
      this.cardNo = this.$decruption(sessionStorage.getItem("card_no"));
      this.bankArea = sessionStorage.getItem("bank_addr");
      this.bankName = sessionStorage.getItem("bank_name");
    },
    methods: {
      backPage() {
        this.$router.push("/paycard_manage")
      },
      change() {
        this.showKey = true;
      },
      closeModal() {
        this.showKey = false;
        this.password = [];
      },
      keyUpHandle(e) {
        let text = e.currentTarget.innerText;
        let len = this.password.length;
        if (!text || len >= 6) return;
        this.password.push(text);
        this.withPwdCheck();
      },
      delHandle() {//删除
        if (this.password.length <= 0)
          return false;
        this.password.pop();
      },
      clearPwdHandle() {//清空
        this.password = [];
      },
      withPwdCheck() {//校验提现密码
        if (this.password.length >= 6) {
          let withPwd = this.password.join(' ').replace(/\s/g, '');
          //判断本地存储密码次数为3次并且cookie中存储的值为null时,就把本地存储的次数清除(cookie10分钟失效后要把本地存储的密码次数删除)
          if (localStorage.getItem("sess_time_local") == 3 && Cookies.get("sess_time_local") == null) {
            localStorage.removeItem("sess_time_local");
          }
          let sess_time = localStorage.getItem("sess_time_local"); //当前密码错误次数就等于本地存储的次数,牵扯到提现密码的页面都会记录并且每次叠加,直接赋值
          if (Cookies.get("sess_time_local") == 3) { //密码错误次数过多
            this.modalVal = true;
            this.modal = "提现密码错误次数过多,请十分钟后再试";
            return;
          } else {//提现密码校验
            this.$vux.loading.show({
              text: '加载中',
            })
            let base64 = require('js-base64').Base64;
            let userSign = base64.decode(sessionStorage.getItem("user_sign"));
            this.axios.get(baseUrl + "/userbank/update_drawpwd?sgin=" + userSign + "&oldPwd=" + md5(md5(withPwd) + salt) + "&type=1" + "&withdrawPwd=''").then((res) => {
              let resultObj = res.data;
              this.$vux.loading.hide();
              if (resultObj.code == 0 && resultObj.data == 1) {
                this.$router.push("/changecard_cardscan");
              } else {//身份验证失败,记录错误提现密码次数
                sess_time++;
                localStorage.setItem("sess_time_local", sess_time);
                if (sess_time == 3) { //错误次数达到3次
                  let date = new Date();
                  date.setTime(date.getTime() + 60 * 1000 * 10); //过期为10分钟
                  Cookies.set('sess_time_local', sess_time, {expires: date, path: ''});
                  this.modalVal = true;
                  this.modal = "提现密码错误次数过多,请十分钟后再试";
                } else { //密码错误次数提醒
                  this.sendVal = true;
                  this.content = "提现密码错误,请重试(还剩" + parseInt(3 - sess_time) + "次机会)"
                }
              }
            }).catch(() => {
              this.$vux.loading.hide();
              this.$vux.toast.text("网络异常", "middle");
            });
          }
        }
        return false
      },
      confirm() {//重试
        this.sendVal = false;
        this.password = [];
      },
      cancel() {//取消
        this.sendVal = false;
        this.showKey = false;
        this.password = [];
      },
      sure() {//提现密码错误次数过多
        this.modalVal = false;
        this.showKey = false;
        this.$router.push("/salary");
      },
      forgetPwd() {//忘记密码
        sessionStorage.setItem("changecard_sign", "001133");
        this.$router.push("/identityauth");
      }
    },
    components: {
      "v-step": flowStep,
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .change-box
    width: 100%
    height: 100%
    overflow: hidden
    .line-box
      margin-top: 0.493rem
      height: 0.28rem
      background: rgba(242, 242, 242, 1)
    .wrap-box
      display: flex
      align-items: center
      margin-left: 3.6%
      width: 96.4%
      height: 1.333rem
      border-bottom: 1px solid rgba(230, 230, 230, 1)
      .title1
        display: flex
        align-items: center
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
      .title2
        display: flex
        align-items: center
        padding-left: 0.107rem
        font-size: 0.44rem
        color: rgba(68, 68, 68, 1)
    .btn-box
      position: fixed
      bottom: 0.48rem
      width: 100%
      height: 1.333rem
      text-align: center
      .btn
        width: 92.53%
        height: 1.333rem
        line-height: 1.333rem
        background: rgba(60, 175, 255, 1)
        border-radius: 0.107rem
        font-size: 0.48rem
        color: rgba(255, 255, 255, 1)
    .tx_bck
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 98
      background-color: rgba(0, 0, 0, 0.5)
      .popup_box
        margin: 0 auto
        margin-top: 10.54%
        wh(92.53%, 5rem)
        background: rgba(255, 255, 255, 1)
        border-radius(0.16rem)
        .popup_top
          display: flex
          padding-top: 0.293rem
          padding-right: 0.293rem
          margin-left: auto
          wh(0.48rem, 0.48rem)
          .close
            wh(100%, 100%)
        .pop_ubox
          margin-bottom: 0.2rem
          wh(100%, auto)
          color: rgba(27, 27, 27, 1)
          .pop_f
            display: flex
            justify-content: center
            margin-bottom: 0.64rem
            font-weight: 500
            size-color(0.48rem, rgba(51, 51, 51, 1))
          .icon2
            color: $color
        .pop_mpb
          margin: 0 auto
          wh(90%, 1.333rem)
          border: 1px solid rgba(224, 224, 224, 1)
          .p_mlist
            float: left
            wh(16.35%, 100%)
            border-right: 1px solid rgba(224, 224, 224, 1)
            &:last-child
              border-right: 0rem
          .mmdd
            display: inline-block
            background: #FFF url(./dark.jpg) center no-repeat
            background-size: 25%
        .pop_moy
          margin-top: 0.75rem
          text-align: center
          size-color(0.44rem, $color)
      .numb_box
        position: fixed
        bottom: 0
        wh(100%, auto)
        background: #f5f5f5
        .xiaq_tb
          display: table
          text-align: center
          margin: 0 auto
          padding: 0.067rem 0rem
          border-top: 1px solid #dadada
          .pull
            width: 0.533333rem
            height: 0.333333rem
            margin-top: 0.183333rem
        .nub_ggg
          border: 1px solid #dadada
          border-bottom: none
          border-left: none
          border-right: none
          width: 100%
          margin-top: 0.133333rem
          overflow: hidden
          li
            width: 33.3333%
            border-bottom: 1px solid #dadada
            float: left
            text-align: center
            font-size: 0.426666rem
            a
              display: block
              color: #000
              height: 1.2rem
              line-height: 1.2rem
              overflow: hidden
              &:active
                background: #e0e0e0
              &:nth-child(1)
                border-right: 1px solid #dadada
</style>
